<style scoped>
.header{
  display: flex;
  flex-direction: column;
}
.header-top{
  width:100%;
  height:10px;
  background: transparent;
}
.head{
  height:50px;
  padding-top: 10px;
  /*border-bottom: 2px solid #dedde3;*/
  display: flex;
  justify-content: center;
  align-items:center;
  background: #ffffff;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}
.head-left{
  position: absolute;
  width:40px;
  height:100%;
  left:0;
  top:0;
  color: #7f7a8e;
  text-align: center;
}
.head-left h1{
  margin-top: 22px;
}
.head-middle{
  color: #7f7a8e;
}
.head-middle h3{
  font-size: 1.6rem;
}

.content{
  width:100%;
  color: #7F7A8E;
  background: #edf1f5;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content input{
  width:100%;
  height:98%;
  border: none;
}
.content h3{
  color: #7F7A8E
}
.content input::placeholder{
  color: rgba(0,0,0,0.2)
}
.first{
  padding-top: 10px;
}
.content>div>ul{
  display: flex;
  flex-direction: column;
}
.content>div>ul>li{
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #E9E9E9;
  background: #ffffff;
  align-items: center;
  height:4.3rem;
}
.content>div>ul>li .left{
  flex:3;
  padding-left: 1rem;
}
.content>div>ul>li .right{
  flex:7;
  display: flex;
  align-items: center;
  padding-right: 1rem;
}
.content>div>ul>li .right h3{
  display: flex;
  flex: 1;
  align-items: center;
}
.second h3{
  font-size: 1.6rem;
}
.content input{
  font-size: 1.4rem;
}
.yzmright{
  display: inline-flex;
  justify-content: space-around;
}
.yzmright p{
  width: 120px;
  text-align: right;
  color: #4B63FF;
}
.second{
  padding: 0 35px;
  margin-bottom: 6rem;
}
.second h3{
  width: 100%;
  text-align: center;
  background: -webkit-linear-gradient(right top, #91A5F7, #6379F7);
  color: #fff;
  border-radius: 4px;
  padding: 8px 0;
}
.second p{
  text-align: center;
  margin-top: 6px;
}
.second p:first-child{
  color: rgba(102,102,102,0,94);
}
.second p:last-child a{
  color: #4B63FF;
  text-decoration: underline;
}

</style>

<template>
  <div style="overflow:hidden;">
    <div class="header" ref="mykhhd" style="position: fixed;top: 0;width: 100%;z-index: 999999;height: 60px;background: white">
      <div class="head">
        <div class="head-left" @click="goBack"><h1 class="iconfont icon-xiangzuo1"></h1></div>
        <div class="head-middle"><h3>银行开户</h3></div>
      </div>
    </div>
    <div class="content" style="padding-bottom: 60px;margin-top:60px;" id='open3Content' ref="contentheight">
      <div class="first">
        <ul>
          <li>
            <div class="left">
              <h3>姓名</h3>
            </div>
            <div class="right">
              <input type="text" placeholder="请与身份证姓名保持一致">
            </div>
          </li>
          <li>
            <div class="left">
              <h3>身份证号</h3>
            </div>
            <div class="right">
              <input type="text" placeholder="仅支持二代身份证">
            </div>
          </li>
          <li>
            <div class="left">
              <h3>银行卡号</h3>
            </div>
            <div class="right">
              <input type="text" placeholder="请确保卡号对应身份证">
            </div>
          </li>
          <li>
            <div class="left">
              <h3>手机号</h3>
            </div>
            <div class="right">
              <input type="text" placeholder="请输入手机号">
            </div>
          </li>
          <li>
            <div class="left">
              <h3>手机验证码</h3>
            </div>
            <div class="right yzmright">
              <input type="text" placeholder="请输入验证码">
              <p>获取验证码</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="second">
        <h3 @click='openSuccess'>开通银行存管账户</h3>
        <p>点击此按钮，即表示您同意</p>
        <p><router-link to="./bankAgreement">《开户协议》</router-link><router-link to="./bankAuthorization">《用户授权协议》</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {

      }
    },
    mounted() {
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
      let h1 = h - 60
      this.$refs.contentheight.style.height = h1 + 'px'
    },
    methods: {
      goBack () {
        this.$router.push('./index')
      },
      openSuccess () {
        this.$router.push('./bankSuccess')
      }
    }
  }
</script>
